{% extends 'base_dashboard.html' %}

{% block title %}{% if is_staff_inbox %}Support Inbox{% else %}My Support Tickets{% endif %} — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
  <div>
    <h4 class="fw-bold mb-1">{% if is_staff_inbox %}Support Inbox{% else %}Support Tickets{% endif %}</h4>
    <p class="text-muted small mb-0">
      {% if is_staff_inbox %}Review and reply to user support requests.{% else %}Get help with enrollments, payments, courses, or your account.{% endif %}
    </p>
  </div>
  <a href="{% url 'support:ticket_create' %}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>New Ticket
  </a>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-4">{{ total_count }}</div>
      <div class="text-muted small">Total</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-4 text-warning">{{ open_count }}</div>
      <div class="text-muted small">Open</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-4 text-primary">{{ progress_count }}</div>
      <div class="text-muted small">In Progress</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 p-3">
      <div class="fw-bold fs-4 text-success">{{ resolved_count }}</div>
      <div class="text-muted small">Resolved / Closed</div>
    </div>
  </div>
</div>

<div class="d-flex gap-2 flex-wrap mb-3">
  <a href="{% url 'support:ticket_list' %}" class="btn btn-sm {% if not status_filter %}btn-dark{% else %}btn-outline-secondary{% endif %}">All</a>
  <a href="?status=open" class="btn btn-sm {% if status_filter == 'open' %}btn-warning{% else %}btn-outline-secondary{% endif %}">Open</a>
  <a href="?status=in_progress" class="btn btn-sm {% if status_filter == 'in_progress' %}btn-primary{% else %}btn-outline-secondary{% endif %}">In Progress</a>
  <a href="?status=resolved" class="btn btn-sm {% if status_filter == 'resolved' %}btn-success{% else %}btn-outline-secondary{% endif %}">Resolved</a>
  <a href="?status=closed" class="btn btn-sm {% if status_filter == 'closed' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">Closed</a>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="table-responsive">
    <table class="table mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th class="ps-4">Ticket</th>
          {% if is_staff_inbox %}<th>From</th>{% endif %}
          <th>Category</th>
          <th>Priority</th>
          <th>Status</th>
          <th>Updated</th>
          <th class="pe-4"></th>
        </tr>
      </thead>
      <tbody>
        {% for ticket in tickets %}
        <tr>
          <td class="ps-4">
            <div class="fw-semibold">{{ ticket.subject }}</div>
            <div class="text-muted small">{{ ticket.reference }}</div>
          </td>
          {% if is_staff_inbox %}
          <td>
            <div class="small fw-medium">{{ ticket.created_by.get_display_name }}</div>
            <div class="text-muted" style="font-size:.75rem;">{{ ticket.created_by.get_role_display }}</div>
          </td>
          {% endif %}
          <td><span class="badge bg-light text-dark border">{{ ticket.get_category_display }}</span></td>
          <td>
            {% if ticket.priority == 'high' %}
              <span class="badge text-bg-danger">High</span>
            {% elif ticket.priority == 'medium' %}
              <span class="badge text-bg-warning">Medium</span>
            {% else %}
              <span class="badge text-bg-secondary">Low</span>
            {% endif %}
          </td>
          <td>
            {% if ticket.status == 'open' %}
              <span class="badge text-bg-warning">Open</span>
            {% elif ticket.status == 'in_progress' %}
              <span class="badge text-bg-primary">In Progress</span>
            {% elif ticket.status == 'resolved' %}
              <span class="badge text-bg-success">Resolved</span>
            {% else %}
              <span class="badge text-bg-secondary">Closed</span>
            {% endif %}
          </td>
          <td class="small text-muted">{{ ticket.updated_at|date:"M d, Y H:i" }}</td>
          <td class="pe-4">
            <a href="{% url 'support:ticket_detail' ticket.pk %}" class="btn btn-sm btn-outline-primary">Open</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center py-5 text-muted">
            <i class="bi bi-life-preserver d-block mb-2" style="font-size:2rem;opacity:.35;"></i>
            No tickets yet.
            {% if not is_staff_inbox %}
              <div class="mt-2"><a href="{% url 'support:ticket_create' %}">Create your first ticket</a></div>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}